<template>
	<view class="searchbg">
		<image src="../../static/cg.png" mode=""></image>
		<view class="searchbox">
			<image src="@/static/index/fdj.png" mode=""></image>
			<input type="text" placeholder="搜索名字,编号" v-model="keyword" />
		</view>
	</view>
	<view class="searchbtn" @click="searchs">查询</view>
	<view class="ssjg">搜索结果</view>
	<view class="listbg">
		
		<view class="listitem" v-for="(item,index) in list" :key="index" @click="gozp(item.id)">
			<view class="">
				<view class="man">
					<text>{{item.name}}</text>
					<text>{{item.id}}</text>
				</view>
				<view class="man" v-if="item.pid>0">
					<text >{{item.pname}}</text>
					<text>{{item.pid}}</text>
				</view>
			</view>
			<!-- <image src="@/static/redright.png" mode=""></image> -->
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	let keyword = ref('')

	import {
		familyList
	} from "@/api/ancestra.js"
	
	let list=ref([])
	
	function gozp(e){
		 uni.navigateTo({
		 	url:"/pages/book/result?id="+e
		 })
	}
	function searchs() {

		// if (!keyword.value) {
		// 	uni.showToast({
		// 		title: "请输入名字",
		// 		icon: "none"
		// 	})
		// 	return
		// }
		uni.showLoading({
			mask: true
		})
	
		familyList({
			keyword: keyword.value,
			parent: true
		}).then(res => {
			uni.hideLoading()
			list.value = res.data
		})
	}
	
 	
</script>
<style>
	/* 	page{
		background: #f6f6f6;
	} */
</style>

<style scoped lang="scss">
	.listbg {
		// margin-left: 30rpx;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 30rpx;

		.listitem {
			margin-top: 30rpx;
			width: 330rpx;
			height: auto;

			background: #EDE7DB;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 16rpx 24rpx;

			&>image {
				width: 28rpx;
				height: 28rpx;
			}

			.man{
				text:nth-of-type(1) {
					font-weight: bold;
					font-size: 26rpx;
				}

				text {
					font-size: 22rpx;
					// font-weight: bold;
				}
			}

	

		}
	}

	.ssjg {
		margin-left: 30rpx;
		font-size: 28rpx;
		font-weight: bold;
		margin-top: 60rpx;
	}

	.searchbtn {
		width: 340rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #A9070C;
		color: #ffffff;
		position: relative;
	}

	.searchbtn::after {
		width: 320rpx;
		height: 80rpx;
		border-radius: 10rpx;
		display: block;
		content: '';
		border: 1rpx solid #ffffff;
		position: absolute;

	}

	.searchbg {
		width: 100%;
		height: 500rpx;
		position: relative;

		&>image {
			width: 100%;
			height: 500rpx;
		}

		.searchbox {
			width: 690rpx;
			margin-left: 30rpx;
			height: 120rpx;
			position: absolute;
			bottom: -60rpx;
			background: #ffffff;
			display: flex;
			align-items: center;
			// justify-content:space-between;
			box-sizing: border-box;
			padding: 0 30rpx;
			border-radius: 20rpx;
			box-shadow: 4rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
			;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			input {
				width: 100%;
				margin-left: 10rpx;
			}

		}
	}
</style>